import { useAppDispatch } from '@/store';
import { deleteHospitalSetAsync, getHospitalSetSync, deleteHospitalSetBatchRemoveAsync, useHospState, getLockAsync } from '@/store/modules/hosp';
import { Button, Table, Space, Tooltip, Popconfirm, Switch, Form, Input } from 'antd';
import { FormOutlined, DeleteOutlined,SearchOutlined } from '@ant-design/icons';
import SetModal from './components/setModal';
import React, { useEffect, useState } from 'react';
import { useForm } from 'antd/lib/form/Form';




const HospitalSet: React.FC = () => {
    // 定义了一个数组
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 可以通过visible控制modal的显示(true)与隐藏(false)
    const [visible, setVisible] = useState(false);
    // 设置modalTitle为SetModal组件的初始值。
    const [modalTitle, setmodalTilte] = useState("添加医院");
    // upHospInfo用于保存要修改的信息
    const [upHospInfo, setUpHospInfo] = useState({})

    // 加载中的状态：true加载中，false代表的是加载完毕
    // const [loading, setLoading] = useState(true);
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 70,
            render: (text: any, record: any, index: number) => {
                return (current - 1) * pageSize + index + 1;
            },
            align: "center",
            ellipsis: true
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
            width: 140,
            ellipsis: true,
            align: "center"
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
            width: 140,
            ellipsis: true,
            align: "center"
        },
        {
            title: "是否锁定",
            dataIndex: "status",
            width: 100,
            align: "center",
            render(status: number, rows: any) {
                return <Switch checked={status === 0} onChange={() => {
                    // console.log(rows);
                    dispatch(getLockAsync(rows.id, rows.status === 0 ? 1 : 0))
                }} />
            }
        },
        {
            title: 'api基础地址',
            dataIndex: 'apiUrl',
            width: 180,
            ellipsis: true,
            align: "center"
        },
        {
            title: '密钥',
            dataIndex: 'signKey',
            width: 180,
            ellipsis: true,
            align: "center"
        },
        {
            title: '联系人姓名',
            ellipsis: true,
            dataIndex: 'contactsName',
            width: 120,
            align: "center"
        },
        {
            title: '联系人手机',
            ellipsis: true,
            dataIndex: 'contactsPhone',
            width: 140,
            align: "center"
        },
        {
            title: '添加时间',
            ellipsis: true,
            dataIndex: 'createTime',
            width: 160,
            align: "center"
        },
        {
            title: '修改时间',
            ellipsis: true,
            dataIndex: 'updateTime',
            width: 160,
            align: "center"
        },
        {
            title: '操作',
            ellipsis: true,
            fixed: 'right',//在最右侧进行浮动
            width: 140,
            // dataIndex: 'hosname',
            // text:key    record:当前行所展示的信息 index:下标。
            render(item: any, record: any, index: number) {
                return (
                    <Space>
                        <Tooltip title="修改">
                            <Button type="primary" onClick={() => {
                                // 将upHospInfo重置为当前行信息
                                setUpHospInfo({ ...record });
                                setmodalTilte("修改医院")
                                setVisible(true);

                            }} shape="circle" icon={<FormOutlined />} />
                        </Tooltip>
                        <Popconfirm
                            title="确认要删除该信息吗?"
                            placement="topRight"
                            onConfirm={() => {
                                dispatch(deleteHospitalSetAsync(item.id));
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Tooltip title="删除">
                                <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} />
                            </Tooltip>
                        </Popconfirm>

                    </Space>

                )
            },
            align: "center"
        }
    ];
    // 从redux中获得医院配置列表
    const { hospSetList, current, total, pageSize, isLoading, getIsLoading } = useHospState();
    const dispatch = useAppDispatch();
    // 发送请求
    useEffect(() => {
        dispatch(getHospitalSetSync(1, pageSize));
    }, [])


    const [form] = useForm()
    return (
        <div>
            <div style={{ marginBottom: 16 }}>
                <Space>
                    <Button type="primary" onClick={() => {
                        setUpHospInfo({});
                        setmodalTilte("添加医院");
                        setVisible(true)

                    }}>添加医院</Button>
                    <Button type="primary" onClick={async () => {
                        // console.log(selectedRowKeys)
                        await dispatch(deleteHospitalSetBatchRemoveAsync(selectedRowKeys));
                        setSelectedRowKeys([]);
                    }} danger disabled={selectedRowKeys.length === 0}>批量删除</Button>

                    <Form form={form}
                        onFinish={(values)=>{
                            dispatch(getHospitalSetSync(1,5,values))
                        }}
                        layout='inline'>
                        <Form.Item name="hosname">
                            <Input placeholder='请输入医院的名称'></Input>
                        </Form.Item>
                        <Form.Item name="hoscode">
                            <Input placeholder='请输入医院的编号'></Input>
                        </Form.Item>
                        <Form.Item name="hoscode">
                            <Button 
                                htmlType='submit' 
                                icon={<SearchOutlined />} type="primary">搜索</Button>
                        </Form.Item>
                        <Form.Item name="hoscode">
                            <Button  onClick={()=>{
                                form.resetFields();
                            }}>重置</Button>
                        </Form.Item>
                    </Form>
                </Space>
            </div>
            <Table
                scroll={{
                    x: 1500
                }}
                loading={getIsLoading}
                pagination={{
                    current,
                    pageSize,//每页条数
                    total,// 数据总数
                    // page:指定的页数，pageSize:每页显示的条数
                    async onChange(page: number, pageSize: number) {
                        await dispatch(getHospitalSetSync(page, pageSize,form.getFieldsValue(true)))
                    }
                }}
                rowKey={"id"}
                bordered={true}
                rowSelection={{
                    // 指定选中项
                    selectedRowKeys,
                    // 当选中以事执行的函数
                    onChange(newSelectedRowKeys: React.Key[]) {
                        setSelectedRowKeys(newSelectedRowKeys);
                    }
                }}
                columns={columns as any}
                dataSource={hospSetList} />

            <SetModal upHospInfo={upHospInfo} modalTitle={modalTitle} setVisible={setVisible} visible={visible} />
        </div>
    );
};

export default HospitalSet;